<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="left">企业信息</div>
                        <!-- <div class="right text-blue" @click="dialogAddVisible = true">新增企业信息</div> -->
                    </div>
                    <div class="edit-enterprise">
                        <el-form ref="form" status-icon :model="form" :show-message="false" label-width="155px" :rules="rules" label-position="left" :inline="true" class="demo-form-inline">
                            <el-form-item label="企业用户名" prop="username">
                                <el-input v-model="form.username"  placeholder="请输入企业用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="公司名称" prop="name">
                                <el-input v-model="form.name" placeholder="请输入公司名称"></el-input>
                            </el-form-item>
                            <el-form-item label="公司地址" prop="address">
                                <el-input v-model="form.address" placeholder="请输入公司地址"></el-input>
                            </el-form-item>
                            <el-form-item label="公司电话" prop="telephone">
                                <el-input v-model="form.telephone" placeholder="请输入公司电话"></el-input>
                            </el-form-item>
                            <el-form-item label="公司性质" prop="type">
                                <el-input v-model="form.type" placeholder="请输入公司性质"></el-input>
                            </el-form-item>
                            <el-form-item label="产品类型" prop="category_id">
                                <el-select v-model="form.category_id" placeholder="请选择产品类型">
                                    <el-option :label="item.name" :value="item.id" v-for="(item, index) in categoryList" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="企业联系人姓名" prop="contacts_name">
                                <el-input v-model="form.contacts_name" placeholder="请输入企业联系人姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="企业联系人电话" prop="contacts_phone">
                                <el-input v-model="form.contacts_phone" placeholder="请输入企业联系人电话"></el-input>
                            </el-form-item>
                            <el-form-item label="所属区域" prop="category_id">
                                <el-select v-model="form.province_id" placeholder="选择所在省份">
                                    <el-option :label="item.province_name" :value="item.province_id" v-for="(item, index) in provinceList" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="区域经理">
                                <el-input v-model="form.area_manager" placeholder="所在省份区域经理"></el-input>
                            </el-form-item>
                            <el-form-item label="经营许可证" required>
                                <div class="flex align-center">
                                    <CustomImageUpload v-model="form.business_permit"></CustomImageUpload>
                                </div>
                            </el-form-item>
                            <el-form-item label="营业执照" required>
                                <div class="flex align-center">
                                    <CustomImageUpload v-model="form.business_license"></CustomImageUpload>
                                </div>
                            </el-form-item>
                            <el-form-item label="二类备案证明" >
                                <div class="flex align-center">
                                    <CustomImageUpload v-model="form.filings_prove"></CustomImageUpload>
                                </div>
                            </el-form-item>
                            <el-form-item label="冷链资质" >
                                <div class="flex align-center">
                                    <CustomImageUpload v-model="form.cold_chain"></CustomImageUpload>
                                </div>
                            </el-form-item>
                            <el-form-item label="法人代表身份证(正面)" >
                                <div class="flex align-center">
                                    <CustomImageUpload v-model="form.legal_person_front"></CustomImageUpload>
                                </div>
                            </el-form-item>
                            <el-form-item label="法人代表身份证(反面)" >
                                <div class="flex align-center">
                                    <CustomImageUpload v-model="form.legal_person_backend"></CustomImageUpload>
                                </div>
                            </el-form-item>
                            <div class="default-select">
                                <el-checkbox v-model="is_defaultVal"></el-checkbox> 设置为默认企业信息
                            </div>
                            <div class="btn-group" style="margin-left:155px">
                                <el-button class="btn-main" @click="onSubmit" :loading="addLoading">保存并提交审核</el-button>
                                <el-button class="btn-white" @click="backList">取消</el-button>
                            </div>

                        </el-form>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>

    </div>
</template>

<script>
import api from "@/api/enterprise";
import commonApi from "@/api/common";
import { validatePhone } from "@/utils/common";
export default {
    name: "enterpriseEdit",
    validate({ params }) {
        // 必须是number类型
        return /^\d+$/.test(params.id)
    },
    data() {
        return {
            provinceList: [],
            categoryList: [],
            addLoading: false,
            form: {
                username: "", // 企业用户名
                name: "", // 公司名称
                address: "", // 公司地址
                telephone: "", // 公司电话
                type: "", // 公司性质

                category_id: "", // 产品类别

                contacts_name: "", // 企业联系人姓名
                contacts_phone: "", // 企业联系人电话
                province_id: "", //区域
                area_manager: "", // 区域经理

                business_permit: "", // 经营许可证(文件地址)
                business_license: "", // 营业执照(文件地址)
                expire_time: "", // 经营许可证到期时间

                filings_prove: "", // 二类备案证明(文件地址)
                cold_chain: "", // 冷链资质

                legal_person_front: "", // 身份证正面(文件地址)
                legal_person_backend: "", // 身份证反面(文件地址)
                is_default: "0"
            },
            is_defaultVal: false,
            rules: {
                username: [
                    { required: true, message: '请输入企业用户名', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入公司地址', trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '请输入公司电话', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入公司性质', trigger: 'blur' },
                ],
                category_id: [
                    { required: true, message: '请选择产品类型', trigger: 'change' },
                ],

                contacts_name: [
                    { required: true, message: '请输入企业联系人姓名', trigger: 'blur' },
                ],
                contacts_phone: [
                    { required: true, message: '请输入企业联系人电话', trigger: 'blur' },
                ],
                province_id: [
                    { required: true, message: '请选择所属区域', trigger: 'change' },
                ],

                // business_permit: [
                //     { required: true, message: '请上传经营许可证', trigger: 'change' },
                // ],
                // business_license: [
                //     { required: true, message: '请上传营业执照', trigger: 'blur' },
                // ],
                expire_time: [
                    { required: true, message: '请选择营业执照过期时间', trigger: 'change' },
                ]
            },
        };
    },
    methods: {
        // 加载数据
        LoadEnterPrise: function () {
            var _this = this;
            var input = {
                id: this.$route.params.id
            }
            api.GetEnterpriseInfo(input)
                .then((res) => {
                    _this.form = res.data;
                    if (_this.form.is_default == "1") {
                        _this.is_defaultVal = true;
                    } 
                })
        },
        onSubmit(){
            var _this = this;
            _this.addLoading = true;
            _this.$refs.form.validate((valid) => {

                if (_this.form.business_permit.length == 0) {
                    this.$message.error("请上传经营许可证")
                    _this.addLoading = false;
                    return;
                }
                if (_this.form.business_license.length == 0) {
                    this.$message.error("请上传营业执照")
                    _this.addLoading = false;
                    return;
                }

                if (valid) {
                    if (!validatePhone(_this.form.contacts_phone)) {
                        this.$message.error("请输入正确的企业联系人手机号");
                        _this.addLoading = false;
                        return;
                    }
                    
                    _this.$confirm(`是否保存并提交审核`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.addLoading = true;
                        _this.form.is_default = "0";
                        if (_this.is_defaultVal) {
                            _this.form.is_default = "1";
                        }
                        api.EditEnterprise(_this.form)
                            .then((res) => {
                                _this.$message.success("提交成功");
                                _this.addLoading = false;
                                _this.backList();
                            }).catch((err) => {
                                _this.addLoading = false;
                            })
                    })
                    
                } else {
                    _this.addLoading = false;
                }
            })
        },
        // 返回上一页
        backList: function () {
            this.$router.back();
        },
        // 加载省份数据
        LoadProvinceList: function () {
            commonApi.GetProvinces()
                .then((res) => {
                    this.provinceList = res.data;
                })
        },
        // 获取产品类型
        LoadProductCategory: function () {
            api.GetCategory()
                .then((res) => {
                    this.categoryList = res.data;
                })
        },
    },
    mounted: function(){
        this.LoadEnterPrise();
        this.LoadProvinceList();
        this.LoadProductCategory();
    }
};
</script>
<style>

</style>